<template>
	<view>
			<view class="activation" >
				<view class="p1">
					<text>激活码</text>
					<text>激活人</text>
					<text>激活时间</text>
				</view>
				<mescroll-uni ref="mescrollRef" bgColor="white" top="100rpx" @init="mescrollInit" :down="downOption"
					:up="upOption" @down="downCallback" @up="upCallback">
					<view class="p2" v-for="(item, index) in lists" :key="index"
						:class=" index === lists.length -1 ? 'staer' :''">
						<view class="display-flex p3">
							<view class="display-flex">
								<view>{{ item.code }}</view>
								<view class="fuz" @click="copyCode(item.code)" v-if="item.use_user_id == 0">复制</view>
							</view>
							<view class="nameis">{{ item.use_user_id > 0 ? item.use_user_info.nickname : '---' }}</view>
							<view class="namesj">{{ item.use_time }}</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
	</view>
</template>

<script>
	import { activeCode } from "@/api/user"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		components: {
			
		},
		data() {
			return {
				lists: [],
				downOption: {
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: "/static/images/empty/order.png",
						tip: "您暂无激活码", // 提示
						fixed: true,
						top: "200rpx",
					},
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			upCallback(page) {
				let num = page.num;
				let size = (page.size += 5);
				
				activeCode({
					page_no: num,
					page_size: size
				})
					.then((res) => {
						if (page.num == 1) this.lists = []; //如果是第一页需手动置空列表
						this.lists = this.lists.concat(res.lists); //追加新数据
						this.mescroll.endBySize(res.lists.length, res.count);
					})
					.catch((err) => {
						this.mescroll.endBySize();
					});
			},
			copyCode(code) {
				var that = this;
				uni.setClipboardData({
					data: code,
					success: function () {
						that.$u.toast('复制成功');
					},
					fail: function () {
						that.$u.toast('复制失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.activationi{
		height: 0 !important;
	}
	.nameis {
		width: 140rpx;
		margin: 0 auto;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: center;
	}
	.namesj{
		width: 250rpx;
		text-align: center;
	}

	.staer {
		border-bottom: 0rpx !important;
	}

	.display-flex {
		display: flex;
	}

	.activation {
		width: 750rpx;
		background: #FFFFFF;
		// border-radius: 14rpx;
		// margin: 0 auto;
		// margin-top: 20rpx;

		.p1 {
			width: 750rpx;
			height: 87rpx;
			background: #ff8200;
			// border-radius: 14rpx 14rpx 0 0;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
			line-height: 87rpx;
			display: flex;
			justify-content: space-between;
			padding-left: 38rpx;
			padding-right: 133rpx;

			text:nth-child(1) {
				margin-left: 50rpx;
			}
		}

		.p2 {
			width: 750rpx;
			height: 95rpx;
			border-bottom: 1rpx solid #e2e2e2;
			padding-right: 41rpx;
			padding-left: 38rpx;
			font-weight: 400;
			font-size: 29rpx;
			color: #666666;
			line-height: 95rpx;

			.p3 {
				view:nth-child(1){
					margin-left: 20rpx;
				}
				.fuz {
					font-size: 17rpx;
					color: #fff;
					width: 42rpx;
					height: 24rpx;
					line-height: 24rpx;
					margin-top: 38rpx;
					background-color: #ff8200;
					margin-left: 6rpx;
					text-align: center;
				}
			}
		}
	}
</style>